<template>
  <transition name="confirm-fade">
    <div class="bg-mask" @click.stop="cancel" v-show="showFlag">
      <div class="confirm">
        <div class="confirm-wrapper">
          <div class="confirm-content">
            <p class="text" v-text="text"></p>
            <div class="operate">
              <div class="operate-btn left" @click.stop="confirm">{{confirmBtnText}}</div>
              <div class="operate-btn" @click.stop="cancel">{{cancelBtnText}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'confirm',
  props: {
    text: {
      type: String,
      default: ''
    },
    confirmBtnText: {
      type: String,
      default: '确定'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    }
  },
  data () {
    return {
      showFlag: false
    }
  },
  methods: {
    show () {
      this.showFlag = true
    },
    hide () {
      this.showFlag = false
    },
    cancel () {
      this.hide()
      this.$emit('cancel')
    },
    confirm () {
      this.hide()
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
  @import "~common/css/variable";
  .confirm-fade-enter-active, .confirm-fade-leave-active {
    transition: all .3s;
  }
  .confirm-fade-enter, .confirm-fade-leave-to {
    opacity: 0;
  }
  .bg-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    background-color: @color-background-d;

    .confirm {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
      width: 70%;

      .confirm-wrapper {
        background-color: @color-highlight-background;
        border-radius: 10px;

        .confirm-content {
          .text {
            text-align: center;
            color: @color-text-l;
            font-size: @font-size-medium;
            height: 50px;
            line-height: 50px;
          }

          .operate {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border-top: 1px solid @color-background;
            height: 30px;

            .operate-btn {
              flex: 1;
              font-size: @font-size-medium;
              color: @color-text-ll;
              line-height: 30px;
              text-align: center;
              box-sizing: border-box;

              &.left {
                border-right: 1px solid @color-background;
              }
            }
          }
        }
      }
    }
  }
</style>
